<template>
  <div>
    <div class="select">
      <!-- 甄选头部 -->
      <div class="select-header">
        <div class="select-slider">
          <div class="select-nav">
            <ul class="nav-list">
              <a href="javascript:;">
                <li><i class="iconfont icon-geren"></i>我的甄选家</li></a
              >
              <a href="javascript:;"
                ><li>
                  <i class="iconfont icon-sousuoleimufill"></i>样式甄选
                </li></a
              >
              <a href="javascript:;">
                <li><i class="iconfont icon-jianyi"></i>建议征集</li></a
              >
              <a href="javascript:;"
                ><li>
                  <i class="iconfont icon-tianmaoshiyongfuwu"></i>样品试用
                </li></a
              >
            </ul>
          </div>
          <a href="javascript:;">
            <div class="slider-img"></div>
          </a>
        </div>
      </div>

      <!-- 商品内容 -->
      <div class="select-main">
        <!-- 楼层1 -->
        <div class="select-floor1">
          <!-- 楼层1标题内容 -->
          <div class="select-floor1-title">
            <span class="title">样式甄选</span>
            <p class="line"></p>
            <p class="choose">请挑选,你喜爱的好物款式</p>
          </div>
          <!-- 楼层1图片内容 -->
          <div class="select-floor1-img">
            <div class="info">
              <p class="title">
                <span class="tag">智造篇</span>
                <span class="des">头部气压按摩带</span>
              </p>
              <p class="pick">
                <span class="pickColor">pick你喜欢的颜色</span>
                <span class="pickNum">参与数&nbsp;5272</span>
                <span class="line"></span>
              </p>
            </div>
            <div class="img-wrapper">
              <ul>
                <li
                  v-for="(goods, index) in selectInfo.goodsList"
                  :key="goods.id"
                >
                  <div @click="showImg(index)">
                    <a href="javascript:;">
                      <div class="magnifier">
                        <i class="iconfont icon-fangdajing"></i>
                      </div>
                      <img :src="goods.img" alt="" />
                    </a>
                  </div>

                  <div class="color">{{ goods.color }}</div>
                  <div class="like">
                    <div class="lineOne"></div>
                    <i class="iconfont icon-aixin"></i
                    ><span>&nbsp;{{ goods.num }}喜欢</span>
                    <div class="lineTwo"></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 楼层1底部 -->
          <div class="select-floor1-footer">
            <div>
              <span>更多甄选 </span><i class="iconfont icon-youjiantou"></i>
            </div>
          </div>
        </div>
        <!-- 楼层2 -->
        <div class="select-floor2">
          <!-- 楼层2标题 -->
          <div class="select-floor2-title">
            <span class="title">建议征集</span>
            <p class="line"></p>
            <p class="choose">告诉我们，你的好物标准</p>
          </div>
          <!-- 楼层2提供建议 -->
          <div class="select-floor2-content">
            <div class="provideAdvice">
              <!-- 建议图片 -->
              <div class="provideAdviceImg">
                <a href="javascript"
                  ><img
                    src="https://yanxuan.nosdn.127.net/54a943d8f41d99d1a9c2864b098860ae.jpg?imageView&quality=95&thumbnail=324y270"
                    alt=""
                  />
                </a>
              </div>
              <!-- 建议内容 -->
              <div class="provideAdviceContent">
                <a href="javascript"
                  ><p class="title">你期待提供哪些宠物的功能性服务</p></a
                >
                <p class="content">
                  如果严选开放了一个可以互动的内容社区，有单独的宠物板块。除了常规的晒日常、学习养宠知识、相互交流功能，你期待还有哪些线上的功能性服务？专业的养宠达人们，快来谈谈吧~
                </p>
                <span class="footer">
                  <div class="footer-img">
                    <img
                      src="	https://yanxuan.nosdn.127.net/1cdd8ef214fe03cef6a053bd0f2f17bc?imageView&quality=95&thumbnail=34y34"
                      alt=""
                    />
                    <img
                      src="https://yanxuan.nosdn.127.net/c2f4f8c4b59370556df21734e4a63cf3.jpg?imageView&quality=95&thumbnail=34y34"
                      alt=""
                    />
                    <img
                      src="https://yanxuan.nosdn.127.net/8efe5bcb239aab687be960005cebf50a.jpg?imageView&quality=95&thumbnail=34y34"
                      alt=""
                    />
                    <img
                      src="	https://yanxuan.nosdn.127.net/1cdd8ef214fe03cef6a053bd0f2f17bc?imageView&quality=95&thumbnail=34y34"
                      alt=""
                    />
                    <img
                      src="https://yanxuan.nosdn.127.net/c2f4f8c4b59370556df21734e4a63cf3.jpg?imageView&quality=95&thumbnail=34y34"
                      alt=""
                    />
                  </div>

                  <span>{{ adviceNum }}人提过建议</span>
                  <span>&nbsp;&nbsp;·{{ watchNum }}人看过</span>
                  <span class="applyAdvice">我来建议</span>
                </span>
              </div>
            </div>
          </div>
          <!-- 楼层2展示建议 -->
          <div class="select-floor2-showAdviceContent">
            <div class="showAdvice-title">TA们正在建议</div>
            <div class="swiper-container advice-container">
              <div class="showAdviceContent swiper-wrapper">
                <ul
                  class="swiper-slide"
                  v-for="adviceInfo in adviceData"
                  :key="adviceInfo.id"
                >
                  <li
                    v-for="adviceList in adviceInfo.adviceList"
                    :key="adviceList.id"
                  >
                    <a href="javascript:;">
                      <div class="adviceTitle">
                        <div class="personImg">
                          <img :src="adviceList.headImg" alt="" />
                        </div>
                        <div class="personInform">
                          <i
                            class="iconfont icon-v5"
                            v-show="adviceList.isVip"
                          ></i
                          ><span>&nbsp;&nbsp;{{ adviceList.userName }}</span>
                          <div>{{ adviceList.dateTime }}</div>
                        </div>
                      </div>
                      <div class="adviceContent">
                        {{ adviceList.content }}
                      </div>
                      <div class="adviceFooter">
                        {{ adviceList.origin }}
                      </div>
                    </a>
                  </li>
                </ul>
                <!-- <div class="swiper-pagination"></div> -->
                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>
          <!-- 楼层2底部 -->
          <div class="select-floor2-footer">
            <div>
              <span>更多征集 </span><i class="iconfont icon-youjiantou"></i>
            </div>
          </div>
        </div>
        <!-- 楼层3 -->
        <div class="select-floor3">
          <!-- 楼层3标题 -->
          <div class="select-floor3-title">
            <span class="title">样品试用</span>
            <p class="line"></p>
            <p class="choose">加入我们，一起检验好物初样</p>
          </div>
          <!-- 楼层3试用内容 -->
          <div class="select-floor3-testContent">
            <ul>
              <li
                v-for="sampleList in selectInfo.sampleTrial"
                :key="sampleList.id"
              >
                <a href="javascript:;">
                  <div class="testImg">
                    <span class="periodNum">{{ sampleList.sampleReport }}</span>
                    <div class="num">限量1份</div>
                    <img :src="sampleList.goodsImg" alt="" />
                  </div>
                  <div class="testDec">
                    <span class="nameDec">{{ sampleList.goodsTitle }}</span>
                    <span class="priceDec"
                      >&nbsp;&nbsp;参考价:{{ sampleList.price }}</span
                    >
                    <div class="funcDec">{{ sampleList.goodsDec }}</div>
                    <div class="checkReport">查看试用报告</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <!-- 楼层3展示试用报告 -->
          <div class="select-floor3-showTestReport">
            <div class="showTest-title">TA们的试用报告</div>
            <div class="showTest-report">
              <ul>
                <li
                  v-for="trialReportList in selectInfo.trialReport"
                  :key="trialReportList.id"
                >
                  <a href="javascript:;">
                    <div class="showReportImg">
                      <div class="pass">样品已通过</div>
                      <div class="skuDetail">
                        <span
                          >{{ trialReportList.trialDec }}&nbsp;&nbsp;&nbsp;{{
                            trialReportList.trialPrice
                          }}</span
                        ><span class="quickBuy">立即购买&nbsp;>></span>
                      </div>
                      <img :src="trialReportList.img" alt="" />
                    </div>
                  </a>
                  <div class="showReportContent">
                    <div class="reportTitle">
                      <div class="titleImg">
                        <img :src="trialReportList.headImg" alt="" />
                      </div>
                      <div class="Info">
                        <div class="personData">
                          <i
                            class="iconfont icon-v5"
                            v-show="trialReportList.isVip"
                          ></i
                          ><span>{{ trialReportList.userName }}</span
                          ><span>{{ trialReportList.job }}</span>
                        </div>
                        <div class="score">
                          评分：&nbsp;<i
                            class="iconfont icon-pingfen"
                            v-for="n in trialReportList.scoreNum"
                            :key="n"
                          ></i>
                        </div>
                      </div>
                    </div>
                    <div class="reportContent">
                      <div class="contentTitle">
                        {{ trialReportList.trialTitle }}
                      </div>
                      <div class="content">
                        <span>{{ trialReportList.trialReportContent }}...</span
                        ><span class="reading">阅读全文>></span>
                      </div>
                    </div>
                    <div class="reportFooter">
                      <div class="brand">
                        <span>{{ trialReportList.origin }}</span
                        ><span class="brandName">{{
                          trialReportList.trial
                        }}</span>
                      </div>
                      <div class="statistics">
                        <span
                          ><i class="iconfont icon-yanjing"></i
                          ><span>{{ trialReportList.watch }}</span></span
                        >
                        <span
                          ><i class="iconfont icon-dianzan"></i
                          ><span>{{ trialReportList.like }}</span></span
                        >
                        <span
                          ><span>{{ trialReportList.date }}</span
                          ><span>{{ trialReportList.time }}</span></span
                        >
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 楼层3底部 -->
          <div class="select-floor3-footer">
            <div>
              <span>更多试用 </span><i class="iconfont icon-youjiantou"></i>
            </div>
          </div>
        </div>
        <!-- 楼层4 -->
        <div class="select-floor4">
          <!-- 楼层4标题 -->
          <div class="select-floor4-title">
            <span class="title">甄选结果</span>
            <p class="line"></p>
            <p class="choose">因为你们，这些好物得以面世</p>
          </div>
          <div class="select-floor3-resultContent">
            <ul>
              <li
                v-for="selectGoodsList in selectInfo.selectGoodsList"
                :key="selectGoodsList.id"
              >
                <a href="javascript">
                  <div class="resultImg">
                    <img :src="selectGoodsList.img" alt="" />
                  </div>
                  <div class="resultContent">
                    <div class="discount">
                      <div
                        v-for="discount in selectGoodsList.discountList"
                        :key="discount"
                      >
                        {{ discount }}
                      </div>
                    </div>
                    <div class="dec">
                      <span>{{ selectGoodsList.goodsDec }}</span>
                    </div>
                    <div class="price">{{ selectGoodsList.price }}</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <!-- 楼层4底部 -->
          <div class="select-floor4-footer">
            <div>
              <span>更多商品</span><i class="iconfont icon-youjiantou"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <selectDialog :isShow.sync="isShow">
      <template v-slot:header>
        <h2>商品大图</h2>
      </template>
      <template>
        <div class="swiper-container picture-container">
          <ul class="swiper-wrapper">
            <li
              v-for="bigImg in selectInfo.dialogBigImg"
              :key="bigImg"
              class="swiper-slide"
            >
              <img :src="bigImg" alt="" />
            </li>
          </ul>
          <!-- <div class="swiper-pagination"></div> -->
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </template>
      <template #footer>
        <div class="swiper-container small-picture-container">
          <ul class="swiper-wrapper">
            <li
              v-for="(smallImg, index) in selectInfo.dialogSmallImg"
              :key="smallImg"
              class="swiper-slide"
              :class="{ smallImg: currentId == index }"
              @click="showSmallImg(index)"
            >
              <img :src="smallImg" alt="" />
            </li>
          </ul>
        </div>
      </template>
    </selectDialog>
  </div>
</template>

<script>
import Swiper from "swiper";
import { mapGetters, mapActions, mapState } from "vuex";
export default {
  name: "selectDetail",
  data() {
    return { isShow: false, currentId: -1 };
  },
  computed: {
    ...mapState("selectDetail", ["selectInfo"]),
    ...mapGetters("selectDetail", ["adviceNum", "watchNum", "adviceData"]),
  },
  methods: {
    ...mapActions("selectDetail", ["getSelectInfo"]),
    //点击原图，小图的显示方式
    showImg(index) {
      this.isShow = true;
      this.currentId = index;
    },
    //点击小图实现高亮
    showSmallImg(index) {
      this.currentId = index;
    },
    //点大图左右键，实现小图高亮
  },
  watch: {
    selectInfo() {
      this.$nextTick(() => {
        new Swiper(".advice-container", {
          direction: "vertical", // 垂直切换选项
          // height: 151,
          loop: true, // 循环模式选项
          // spaceBetween: 0,
          // slidesPerView: 1,
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
          },
          autoplay: {
            delay: 2000,
            // disableOnInteraction: false,
          },
          // 如果需要前进后退按钮
          // navigation: {
          //   nextEl: ".swiper-button-next",
          //   prevEl: ".swiper-button-prev",
          // },
        });
      });
    },
  },
  mounted() {
    this.getSelectInfo();
  },
};
</script>

<style lang="less" scoped>
.select {
  width: 100%;
  .select-header {
    //甄选头部图片
    .select-slider {
      width: 100%;
      height: 420px;
      position: relative;
      //甄选导航
      .select-nav {
        .nav-list {
          position: absolute;
          margin-top: 8px;
          margin-left: 25px;
          a {
            text-decoration: none;
            color: #666;
            li {
              font-size: 16px;
              text-align: center;
              box-sizing: border-box;
              padding: 15px;
              width: 180px;
              height: 100px;
              margin-bottom: 2px;
              background-color: rgba(255, 255, 255, 0.8);
              border-radius: 3px;
              i {
                font-size: 40px;
                display: block;
              }
              &:hover {
                background: rgba(178, 159, 124, 0.8);
                color: #fff;
              }
            }
          }
        }
      }
      .slider-img {
        width: 100%;
        height: 420px;
        background: url(https://yanxuan.nosdn.127.net/185d8f403be6fc833c993f2cdaedcfb1.jpg?imageView&quality=95&thumbnail=1920x480)
          center center no-repeat;
      }
    }
  }
  // 商品内容
  .select-main {
    background-color: #fff;
    overflow: hidden;
    padding-bottom: 20px;
    // 楼层1
    .select-floor1 {
      //楼层1标题
      background-color: #f5f5f5;
      .select-floor1-title {
        padding-top: 35px;
        padding-bottom: 50px;
        text-align: center;
        .title {
          font-size: 26px;
          display: block;
        }
        .line {
          width: 50px;
          height: 2px;
          margin-top: 20px;
          margin-bottom: 12px;
          background-color: rgb(51, 51, 51);
          display: inline-block;
        }
        .choose {
          font-size: 14px;
        }
      }
      //楼层1图片以及主要内容
      .select-floor1-img {
        width: 1090px;
        margin: 0 auto;
        .info {
          width: 1030px;
          margin: 0 auto;
          background-color: #fff;
          padding: 32px 30px 20px 30px;
          height: 54px;
          .title {
            font-size: 22px;
            vertical-align: middle;
            &::before {
              content: "";
              width: 2px;
              height: 28px;
              background-color: #b4a078;
              position: absolute;
              margin-right: 20px;
            }
            .tag {
              display: inline-block;
              width: 66px;
              padding: 0 8px;
              color: rgb(180, 160, 120);
              &::after {
                content: "";
                width: 2px;
                height: 28px;
                background-color: #b4a078;
                position: absolute;
                margin-left: 8px;
              }
            }
            .des {
              margin-left: 15px;
              width: 154px;
            }
          }
          .pick {
            font-size: 14px;
            color: rgb(102, 102, 102);
            margin-top: 5px;

            .pickColor {
              margin-right: 20px;
              &::after {
                content: "·";
                position: absolute;
                margin-left: 10px;
              }
            }
            .pickNum {
              margin-right: 20px;
            }
            .line {
              display: inline-block;
              width: 790px;
              border-bottom: 1px solid rgb(234, 234, 234);
            }
          }
        }
        .img-wrapper {
          width: 1090px;
          margin: 0 auto;
          background-color: #fff;
          margin-bottom: 40px;
          li {
            display: inline-block;
            width: 257px;
            // height: 324px;
            margin-right: 15px;
            margin-bottom: 44px;
            text-align: center;
            div {
              .magnifier {
                display: none;
                width: 70px;
                height: 70px;
                position: absolute;
                border-radius: 50%;
                background-color: rgb(133, 133, 133);
                color: #fff;
                margin-top: 90px;
                margin-left: 90px;
                text-align: center;
                line-height: 70px;
                i {
                  font-size: 30px;
                }
              }
              a:hover .magnifier {
                display: block;
              }
            }

            .color {
              width: 200px;
              height: 30px;
              margin: 0 auto;
              font-size: 14px;
              color: rgb(102, 102, 102);
            }
            .like {
              height: 17px;
              font-size: 12px;
              color: #333;
              .lineOne {
                display: inline-block;
                width: 20px;
                height: 2px;
                background-color: #ddd;
                margin-right: 20px;
              }

              i {
                font-size: 26px;
                vertical-align: middle;
              }
              .lineTwo {
                display: inline-block;
                width: 20px;
                height: 2px;
                background-color: #ddd;
                margin-left: 20px;
              }
            }
          }
        }
      }
      //楼层1脚部样式
      .select-floor1-footer {
        font-size: 20px;
        color: #333;
        text-align: center;
        padding-bottom: 40px;
        i {
          font-size: 27px;
          vertical-align: middle;
        }
      }
    }
    //楼层2
    .select-floor2 {
      background-color: #fff;
      //楼层2标题
      .select-floor2-title {
        padding-top: 30px;
        padding-bottom: 30px;
        text-align: center;
        .title {
          font-size: 26px;
          display: block;
        }
        .line {
          width: 50px;
          height: 2px;
          margin-top: 20px;
          margin-bottom: 12px;
          background-color: rgb(51, 51, 51);
          display: inline-block;
        }
        .choose {
          font-size: 14px;
        }
      }
      //楼层2提供建议内容内容
      .select-floor2-content {
        .provideAdvice {
          width: 1090px;
          margin: 0 auto;
          background-color: #f4f4f4;
          .provideAdviceImg {
            vertical-align: top;
            display: inline-block;
            img {
              display: block;
            }
          }
          .provideAdviceContent {
            display: inline-block;
            padding: 40px 50px 0 46px;
            // height: 250px;
            a {
              text-decoration: none;
              .title {
                color: #333;
                font-size: 22px;
              }
            }

            .content {
              width: 670px;
              margin-bottom: 60px;
              margin-top: 30px;
              font-size: 16px;
              color: #666;
            }
            .footer {
              font-size: 14px;
              .footer-img {
                overflow: hidden;
                display: inline-block;
                vertical-align: middle;

                img {
                  float: left;
                  border-radius: 50%;
                  border: 1px solid #fff;
                  margin-left: -6px;
                }
                margin-right: 25px;
              }
              .applyAdvice {
                position: absolute;
                right: 60px;
                display: inline-block;
                text-align: center;
                color: #fff;
                width: 142px;
                height: 40px;
                line-height: 40px;
                background-color: rgb(180, 160, 120);
              }
            }
          }
        }
        //
      }
      //楼层2展示建议
      .select-floor2-showAdviceContent {
        background-color: #fff;
        // border: 1px solid green;
        width: 1090px;
        margin: 0 auto;
        //展示建议标题
        .showAdvice-title {
          height: 33px;
          margin: 33px auto 15px;
          text-align: center;
          color: #333;
          font-size: 22px;
        }
        //展示建议内容
        .swiper-container {
          height: 180px;
          overflow: hidden;
          .showAdviceContent {
            height: 540px;
            ul {
              li {
                width: 310px;
                height: 151px;
                padding: 17px 22px 10px 20px;
                border: 1px solid rgb(234, 234, 234);
                font-size: 14px;
                float: left;
                margin-left: 13px;
                a {
                  text-decoration: none;
                  color: rgb(102, 102, 102);
                  &:hover .adviceTitle .adviceContent {
                    color: rgb(102, 102, 102);
                  }
                }

                .adviceTitle {
                  overflow: hidden;
                  .personImg {
                    float: left;

                    img {
                      border-radius: 50%;
                    }
                  }
                  .personInform {
                    i {
                      color: #e2cba0;
                    }
                    margin-left: 70px;
                    color: #333;
                    div {
                      margin-top: 10px;
                      color: #999;
                    }
                  }
                }
                .adviceContent {
                  color: #666;
                  margin-top: 10px;
                }
                .adviceFooter {
                  margin-top: 5px;
                  color: #69c;
                }
              }
              :first-child {
                margin-left: 0px;
              }
            }
          }
        }
      }
      //楼层2底部样式
      .select-floor2-footer {
        font-size: 20px;
        color: #333;
        text-align: center;
        margin-top: 30px;
        padding-bottom: 30px;
        i {
          font-size: 27px;
          vertical-align: middle;
        }
      }
    }
    //楼层3
    .select-floor3 {
      width: 1090px;
      margin: 0 auto;
      background-color: #fff;
      //楼层3标题
      .select-floor3-title {
        padding-top: 20px;
        margin-bottom: 20px;
        text-align: center;
        .title {
          font-size: 26px;
          display: block;
        }
        .line {
          width: 50px;
          height: 2px;
          margin-top: 20px;
          margin-bottom: 12px;
          background-color: rgb(51, 51, 51);
          display: inline-block;
        }
        .choose {
          font-size: 14px;
        }
      }
      //楼层3样品试用
      .select-floor3-testContent {
        overflow: hidden;
        li {
          width: 352px;
          height: 450px;
          border: 1px solid rgb(234, 234, 234);
          text-align: center;
          margin-left: 12px;
          float: left;
          a {
            text-decoration: none;
            &:hover div {
              color: #333;
            }
            .testImg {
              //期数多少
              .periodNum {
                display: inline-block;
                position: absolute;
                margin-left: 193px;
                margin-top: 23px;
                height: 32px;
                line-height: 32px;
                padding: 0 10px 0 18px;
                font-size: 13px;
                font-weight: 700;
                flood-color: #333;
                border-radius: 2px;
                border-right: 3px solid #333;
                background-color: rgba(255, 255, 255, 0.8);
              }
              .num {
                position: absolute;
                width: 344px;
                height: 30px;
                line-height: 30px;
                padding-left: 8px;
                color: #fff;
                font-size: 13px;
                margin-top: 268px;
                text-align: left;
                background: url(https://yanxuan.nosdn.127.net/9b01974b8183ab78a3b0b20ba40493b4.png)
                  repeat-y;
              }
            }
            .testDec {
              width: 352px;
              height: 102px;
              padding-top: 20px;
              .nameDec {
                font-size: 18px;
                color: #292929;
              }
              .priceDec {
                font-size: 14px;
                color: #b39f7c;
              }
              .funcDec {
                color: #666;
                font-size: 14px;
                margin-top: 12px;
                // text-align: center;
              }
              .checkReport {
                display: inline-block;
                margin-top: 20px;
                width: 164px;
                height: 38px;
                line-height: 38px;
                font-size: 18px;
                color: #b4a078;
                border: 1px solid #b4a078;
                background-color: #f5f3ef;
              }
            }
          }
        }
        :first-child {
          margin-left: 0px;
        }
      }
      //楼层3展示试用报告
      .select-floor3-showTestReport {
        .showTest-title {
          height: 33px;
          margin: 33px auto 15px;
          text-align: center;
          color: #333;
          font-size: 22px;
        }
        .showTest-report {
          li {
            font-size: 0px;
            overflow: hidden;
            border: 1px solid #eaeaea;
            margin-bottom: 30px;
            a {
              text-decoration: none;
              float: left;
              &:hover.pass {
                color: #e2cba0;
              }
              .pass {
                position: absolute;
                height: 34px;
                line-height: 34px;
                padding: 0 12px;
                color: #e2cba0;
                background-color: #333;
                font-size: 15px;
                margin-top: 20px;
                &::after {
                  position: absolute;
                  content: "";
                  // height: 34px;
                  border: 17px solid #333;
                  border-right: 17px solid transparent;
                }
              }
              .skuDetail {
                position: absolute;
                width: 363px;
                height: 34px;
                line-height: 34px;
                padding: 0 17px 0 10px;
                color: #fff;
                font-size: 15px;
                background-color: #333;
                opacity: 0.8;
                box-sizing: border-box;
                margin-top: 266px;
                .quickBuy {
                  color: #e2cba0;
                  margin-left: 70px;
                }
              }
            }
            .showReportContent {
              padding: 18px 16px 0 395px;
              .reportTitle {
                overflow: hidden;
                .titleImg {
                  float: left;
                  // vertical-align: bottom;
                  img {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    display: block;
                  }
                }
                .Info {
                  margin-left: 70px;
                  .personData {
                    margin-bottom: 5px;
                    i {
                      color: #e2cba0;
                      font-size: 20px;
                      margin-right: 7px;
                    }
                    span {
                      margin-right: 7px;
                      color: #666;
                      font-size: 14px;
                    }
                  }
                  .score {
                    color: #666;
                    font-size: 14px;
                    i {
                      margin-right: 7px;
                      color: crimson;
                    }
                  }
                }
              }
              .reportContent {
                font-size: 13px;

                color: #333;
                .contentTitle {
                  margin-top: 20px;
                  margin-bottom: 14px;
                  font-size: 20px;
                }
                .content {
                  line-height: 25px;
                  .reading {
                    color: #69c;
                    text-decoration: underline;
                    margin-left: 10px;
                  }
                }
              }
              .reportFooter {
                color: #999;
                margin-top: 45px;
                .brand {
                  display: inline-block;
                  font-size: 13px;
                  .brandName {
                    color: #69c;
                    margin-left: 10px;
                  }
                }
                .statistics {
                  font-size: 10px;
                  display: inline-block;
                  margin-left: 160px;
                  span {
                    margin-right: 7px;
                    i {
                      margin-right: 7px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .select-floor3-resultContent {
      }
      //楼层3底部样式
      .select-floor3-footer {
        font-size: 20px;
        color: #333;
        text-align: center;
        margin-top: 30px;
        padding-bottom: 30px;
        i {
          font-size: 27px;
          vertical-align: middle;
        }
      }
    }
    .select-floor4 {
      width: 1090px;
      margin: 0 auto;
      background-color: #fff;
      //楼层4标题
      .select-floor4-title {
        padding-top: 20px;
        margin-bottom: 20px;
        text-align: center;
        .title {
          font-size: 26px;
          display: block;
        }
        .line {
          width: 50px;
          height: 2px;
          margin-top: 20px;
          margin-bottom: 12px;
          background-color: rgb(51, 51, 51);
          display: inline-block;
        }
        .choose {
          font-size: 14px;
        }
      }
      //楼层4结果内容
      .select-floor3-resultContent {
        overflow: hidden;
        li {
          float: left;
          width: 265px;
          height: 350px;
          margin-left: 10px;
          a {
            &:hover {
              text-decoration: none;
            }
            .resultContent {
              text-align: center;
              text-decoration: none;
              .discount {
                margin-top: 10px;
                div {
                  display: inline-block;
                  line-height: 20px;
                  height: 20px;
                  padding: 0 5px;
                  margin-right: 20px;

                  box-sizing: border-box;
                  color: #fff;
                  background-color: rgb(227, 104, 67);
                }
              }
              .dec {
                margin-top: 5px;
                margin-bottom: 10px;
                span {
                  color: #333;
                  font-size: 14px;
                  &:hover {
                    text-decoration: none;
                    color: #b29f7c;
                  }
                }
              }
              .price {
                font-size: 14px;
                color: #be4141;
              }
            }
          }
        }
        :first-child {
          margin-left: 0px;
        }
      }
      //楼层4底部样式
      .select-floor4-footer {
        font-size: 20px;
        color: #333;
        text-align: center;
        margin-top: 30px;
        padding-bottom: 30px;
        i {
          font-size: 27px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>

